import React, { Component } from "react";
import "./Footer.css";

export default class Footer extends Component {
	state = {
		footerarr: [
			{ title: "关于我们", checked: false },
			{ title: "联系我们", checked: false },
			{ title: "企业文化", checked: false },
			{ title: "加入我们", checked: false },
			{ title: "爱啥啥", checked: false },
		],
		index: 0,
	};

	//创建点击修改背景色 函数
	updatechecked = (i) => {
		return () => {
			//获取state数据
			let newfooterarr = this.state.footerarr;
			//修改上一次样式
			newfooterarr[this.state.index].checked = false;
			//修改现在样式
			newfooterarr[i].checked = true;
			//改变状态
			this.setState({
				footerarr: newfooterarr,
				index: i,
			});
		};
	};
	render() {
		let { footerarr } = this.state;
		return (
			<div className="footer">
				<ul>
					{footerarr.map((item, index) => {
						return (
							<li
								className={item.checked ? "active" : null}
								onClick={this.updatechecked(index)}
								key={index}
							>
								{item.title}
							</li>
						);
					})}
				</ul>
			</div>
		);
	}
}
